import {
  MinusCircleOutlined,
  PlusCircleOutlined,
  PlusOutlined,
} from '@ant-design/icons';
import { Button } from 'antd';
import { FormItem, List, YmForm, useForm } from 'ym-design';

import { Input, InputNumber, Space } from 'antd';

function OnStyle() {
  const [form] = useForm();
  return (
    <div style={{ maxWidth: '600px' }}>
      <div style={{ marginBottom: '30px' }}>
        <p style={{ fontSize: '12px', marginBottom: '10px' }}>
          FormItem验证时，FormItem.noStyle ===
          true的FormItem会把验证信息(meta.errors)通过Context传递给父级FormItem,此时父级FormItem不能设置noStyle
        </p>
      </div>
      <YmForm
        form={form}
        autoComplete="off"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        onFieldsChange={(fields) => {
          console.log('--Form--onFieldsChange---fields:', fields);
        }}
        onValuesChange={(values) => {
          console.log('--Form--onValuesChange---values:', values);
        }}
        onFinish={(values) => {
          console.log('--Form--onFinish---values:', values);
        }}
        onFinishFailed={(errorInfo) => {
          console.log('--Form--onFinishFailed--errorInfo--:', errorInfo);
        }}
      >
        <List name="users" initialValue={[{ name: 'zy1', age: 30 }]}>
          {(fields, { add, remove, move }, { errors }) => {
            return (
              <>
                {fields.map((field, index) => (
                  <FormItem
                    key={field.key}
                    label={index === 0 ? '姓名/年龄' : null}
                    labelCol={index === 0 ? { span: 8 } : {}}
                    wrapperCol={
                      index === 0 ? { span: 16 } : { span: 16, offset: 8 }
                    }
                    required
                  >
                    <Space direction="horizontal" size="small">
                      <Space.Compact>
                        <FormItem
                          name={[field.name, 'name']}
                          noStyle
                          rules={[
                            { required: true, message: '姓名不得为空' },
                            {
                              type: 'string',
                              min: 2,
                              max: 6,
                              message: '请输入2-6个字之间',
                            },
                          ]}
                        >
                          <Input placeholder="请输入姓名" />
                        </FormItem>
                        <FormItem
                          name={[field.name, 'age']}
                          noStyle
                          rules={[
                            { required: true, message: '年龄不得为空' },
                            {
                              type: 'number',
                              min: 10,
                              max: 60,
                              message: '请输入10-60之间的数字',
                            },
                          ]}
                        >
                          <InputNumber
                            placeholder="请输入出年龄"
                            min={10}
                            max={60}
                          />
                        </FormItem>
                      </Space.Compact>
                      {fields.length > 1 ? (
                        <MinusCircleOutlined
                          onClick={() => {
                            remove(index);
                          }}
                        />
                      ) : null}
                      <PlusCircleOutlined
                        onClick={() => {
                          add(undefined, index + 1);
                        }}
                      />
                    </Space>
                  </FormItem>
                ))}
                <FormItem wrapperCol={{ span: 16, offset: 8 }}>
                  <>
                    <Button
                      type="dashed"
                      onClick={() => {
                        add();
                      }}
                      style={{ width: '60%' }}
                      icon={<PlusOutlined />}
                    >
                      Add field
                    </Button>
                    <Button
                      type="dashed"
                      style={{ width: '60%' }}
                      icon={<MinusCircleOutlined />}
                    >
                      cancel
                    </Button>
                  </>
                </FormItem>
              </>
            );
          }}
        </List>
        <FormItem wrapperCol={{ span: 16, offset: 8 }}>
          <Space direction="horizontal">
            <Button htmlType="submit" type="primary">
              submit
            </Button>
            <Button htmlType="reset">reset</Button>
          </Space>
        </FormItem>
      </YmForm>
    </div>
  );
}

export default OnStyle;
